<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!--添加全局路径-->
    <base th:href="${#request.getContextPath() + '/'}"/>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen"/>
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen"/>
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen"/>

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-1.8.3.min.js"></script>
    <!-- jQuery Configuration -->
    <!--有问题的代码,需要注释掉-->
    <!--<script type="text/javascript"-->
            <!--src="resources/scripts/simpla.jquery.configuration.js"></script>-->

    <!--引入上传下载控件-->
    <link rel="stylesheet" type="text/css" href="resources/widget/webuploader/webuploader.css"/>
    <script type="text/javascript" src="resources/widget/webuploader/webuploader.min.js"></script>

    <!--webupload控件-->
    <script>
        $(function () {
            //初始化控件WebUpload
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: 'resources/widget/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: 'goods/uploadimg',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#select_div'
            });

            //上传之后,生缩略图显示到img控件中
            //绑定一个文件添加到队列后的监听事件
            uploader.on('fileQueued', function(file){
                //生成缩略图
                uploader.makeThumb(file, function( error, src) {
                    //放入img标签中
                    $("#img").attr("src", src);
                }, 100, 100 );
            });

            //绑定一个上传成功的事件
            uploader.on('uploadSuccess', function(file, response){
                //上传成功，获得上传后的图片url路径
                $("#img_hide").val(response.imgpath);
            });

            //绑定一个上传失败的事件
            uploader.on('uploadError', function(){
                alert("上传失败！！");
            });

        })
    </script>


</head>
<body>
<div id="main-content">
    <div class="content-box">
        <div class="content-box-content">
            <div class="tab-content default-tab" id="tab2">

                <form th:action="${#request.getContextPath() + '/goods/insertGoods'}" method="post">
                    <fieldset>
                        <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
                        <p>
                            <label>商品名称</label> <input
                                class="text-input small-input" type="text" id="small-input"
                                name="title"/>
                        </p>

                        <p>
                            <label>商品图片</label>
                            <img id="img" src="resources/images/icons/header.jpg" style="width: 100px; height: 100px;"/>
                        <div id="select_div">选择图片</div>
                        <!-- 保存上传图片的url的隐藏域 -->
                        <input id="img_hide" name="gimage" type="hidden"/>
                        </p>

                        <p>
                            <label>库存</label> <input
                                class="text-input small-input" type="text"
                                name="gcount"/>
                        </p>

                        <p>
                            <label>原价</label> <input
                                class="text-input small-input" type="text"
                                name="allprice"/>
                        </p>

                        <p>
                            <label>折后价</label> <input
                                class="text-input small-input" type="text"
                                name="price"/>
                        </p>

                        <p>
                            <label>描述</label>
                            <textarea class="text-input textarea wysiwyg" id="textarea"
                                      name="ginfo" cols="79" rows="15"></textarea>
                        </p>

                        <p>
                            <input class="mybutton" type="submit" value="添加商品"/>
                        </p>
                    </fieldset>
                    <div class="clear"></div>
                    <!-- End .clear -->
                </form>


            </div>
            <!-- End #tab2 -->
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<!-- End #main-content -->
</body>
</html>